import {Component, EventEmitter, Input, Output} from "@angular/core";

@Component({
    selector:"df-image-editor",
    template:`
        <img [src]="imageSrc|imageUrl">
        <div class="bar" (click)="delete()">&times;</div>
    `,
    styles:[`
        :host{
            position:relative;
            display:block;
            height:100%;
            border:1px darkslategray dashed;
        }
        img{
            width:100%;
            height:100%;
        }
        .bar{
            position:absolute;
            top:0;
            width:100%;
            height:25px;
            line-height:25px;
            font-weight:bolder;
            font-size:20px;
            padding-right:20px;
            box-sizing: border-box;
            text-align: right;
            background-color:darkslategray;
            opacity: 0.3;
            color:white;
            
        }
        
    `]
})
export class ImageEditorComponent{
    @Input() imageSrc;
    @Output() deleting:EventEmitter<void>=new EventEmitter<void>();
    delete(){
        this.deleting.emit(null);
    }
}